<template>
    <div>
        <head-nav></head-nav>
        <div class="center5">
            <div class="xbt">点评景点</div>
            <div class="nr">
                <div class="nr-left">
                    <img src="../../assets/img/101.jpg" width="160"/>
                    <div class="title1">青岛啤酒博物馆 <span>(4A景区)</span></div>
                    <div class="title2">解密青岛啤酒生产过程</div>
                </div>
                <div class="nr-right">
                    <div class="nr-r-1">
                        <span>评分：</span>
                        <span>
                            <el-rate v-model="value1"></el-rate>
                        </span>
                        <span>点击星星进行评价</span>
                    </div>
                    <div class="nr-r-2">
                        <span>评价：</span>
                        <div>
                            <el-input
                                    type="textarea"
                                    placeholder="亲，喜欢这个景点吗?说出你的感受哦~"
                                    v-model="textarea"
                                    maxlength="10000"
                                    :rows="15"
                                    show-word-limit>
                            </el-input>
                        </div>
                    </div>
                    <div class="nr-r-3">
                        <el-form :label-position="labelPosition" :model="formLabelAlign" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-upload v-model="formLabelAlign.ImageUrl" :limit="4" action="#" list-type="picture-card" :auto-upload="false" >
                                    <i slot="default" class="el-icon-plus"></i>
                                    <div slot="file" slot-scope="{file}">
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                            <i class="el-icon-zoom-in"></i>
                                            </span>
                                        </span>
                                    </div>
                                </el-upload>
                                <el-dialog :visible.sync="formLabelAlign.dialogVisible">
                                    <img width="100%" :src="formLabelAlign.ImageUrl" alt="">
                                </el-dialog>
                        </el-form>
                    </div>
                    <div class="nr-r-4">
                        <input value="发表点评" type="submit">
                    </div>
                </div>
            </div>
        </div>
        <foot-nav></foot-nav>
    </div>
</template>

<script>
    import HeadNav from "@/components/HeadNav";
    import FootNav from "@/components/FootNav";
    export default {
        name: "WyplView",
        components: {FootNav, HeadNav},
        data(){
            return{
                labelPosition:'top',
                value1: null,
                textarea: '',
                formLabelAlign: {
                    name:'',
                    introduce: '',
                    num: '',
                    address:'',
                    people:'',
                    mailbox: '' ,
                    ImageUrl:'',
                    dialogVisible: false,
                    disabled: false,
                },
            }
        },
        methods: {
            handlePictureCardPreview(file) {
                this. formLabelAlign. ImageUrL = file.url;
                this. formLabelAlign. dialogVisible = true;
            },
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .center5{
        width: 1190px;
        margin: 0 auto 10px;
        padding: 25px;
    }
    .xbt{
        width: 100%;
        text-align: left;
        color: #00d0d4;
        border-bottom: 1px solid #00d0d4;
    }
    .nr{
        display: flex;
    }
    .nr-left{
        width: 160px;
        padding: 25px;
        text-align: left;
        display: flex;
        flex-direction: column;
    }
    .title1{
        font-size: 18px;
        margin: 25px 0;
    }
    .title1 span{
        font-size: 12px;
    }
    .title2{
        font-size: 12px;
    }
    .nr-right{
        flex: 1;
        margin-left: 20px;
        margin-top: 25px;
    }
    .nr-r-1{
        display: flex;
        margin-bottom: 10px;
    }
    .nr-r-1 span:nth-of-type(1){
        margin-right: 30px;
    }
    .nr-r-1 span:nth-of-type(2){
        margin-right: 30px;
    }
    /deep/.el-rate__icon {
        font-size: 30px;
    }
    /deep/.el-rate__text{
        font-size: 20px;
    }
    /deep/.el-rate{
        height: 40px;
    }
    .nr-r-2{
        display: flex;
        margin-bottom: 30px;
    }
    .nr-r-2 span:nth-of-type(1){
        margin-right: 30px;
    }
    .nr-r-2 div{
        flex: 1;
    }
    .nr-r-3{
        width: 880px;
        min-height: 170px;
        text-align: left;
        margin-left: 78px;
    }
    .nr-r-4{
        text-align: left;
        margin-left: 78px;
    }
    .nr-r-4 input{
        border: none;
        width: 140px;
        height: 40px;
        background: rgb(247,186,42);
        color: white;

    }
</style>